<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	
	label{
		width:100px;
		display: inline-block;
	}
</style>
</head>
<body>
<h1>我的第一个主页</h1>

<form>
	<label for="username">用户名</label>
	<input type="text" name="username" id="username"><br>
	<label for="pass">密码</label>
	<input type="password" name="pass" id="pass"><br>
	<input type="button" value="提交">
</form>

<table>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>籍贯</th>
	</tr>
</table>

<script type="text/javascript" src="jquery.js"></script>
<script>

	$(function(){

		var str='<tr>\
			<td>name</td>\
			<td>age</td>\
			<td>jiguan</td>\
		</tr>';
		// debugger;
		
		
		function loadTable(){
			$.get('first',function(data) {

				if(typeof(data)=="string"){
					data=JSON.parse(data);
				}
				// debugger;
				if(Array.isArray(data)){
					data.forEach(function(item){
						var temp=str.replace('name',item.name)
						.replace('age',item.age)
						.replace('jiguan',item.jiguan);
						$("table").append(temp);
					});
				}
			});
		}
		var argObj={
			username:$("#username").val(),
			pass:$("#pass").val()
		}
		
		$('input[type=button]').click(function (e) {
			$.post('LoginServlet',argObj
			,function(data){
				var obj=JSON.parse(data);
				if(obj.status=="success"){
					loadTable();
				}
			});
		});
		
	});

</script>
</body>
</html>